<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>米哈游网页设计</title>
	<!-- 导入CSS资源 -->
  <link rel="stylesheet" href="./font//iconfont.css">
  <link rel="stylesheet" href="./css/header.css">
  <link rel="stylesheet" href="./css/main.css">

</head>

<body>
  <!-- 主盒子 -->
  <div class="container">
    <!-- 头部主布局 -->
    <div class="header">
      <!-- 头部居中布局 -->
      <div class="header_inner">
				<!-- 米哈游logo布局 -->
        <div class="header_logo">
          <img src="./images/米哈游.png" alt="米哈游Logo">
        </div>
				<!-- 米哈游标题 -->
        <div class="header_title">米哈游-原神</div>
        <div class="header_navwrap">
					<!-- 导航栏 -->
          <div class="navbar">
            <a href="" class="header_navitem">首页</a>
            <a href="" class="header_navitem">酒馆</a>
            <a href="" class="header_navitem">攻略</a>
            <a href="" class="header_navitem">观测区</a>
            <a href="" class="header_navitem">同人图</a>
            <div class="header_navitem header_navitemmore">
              <span>更多</span>
              <i class="mhy-icon iconfont icon-sort_desc"></i>

               <!-- li标签 -->
              <ul class="header_navitem_show">
                <li><a href="">COS</a></li>
                <li><a href="">硬核</a></li>
              </ul>
            </div>
          </div>
        </div>
				
        <!-- 头部右边布局 -->
        <div class=" header_right">
					<!-- 搜索栏 -->
          <form class="header_search">
            <input type="text">
						<!-- icon样式 -->
            <i class="mhy-icon iconfont icon-sousuo"></i>
          </form>
					
					<!-- 兔子icondiv布局 -->
          <div class="header_avatorcontainer">
            <div class="header_avatorwarp">
              <img src="./images/avatarDefaultPc.png" class="header_avator"/>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容主题布局 -->
    <div class="root-page-container">
      <div class="mhy-layout mhy-main-page mhy-article-page">
        <div class="mhy-layout_main">
          <div class="mhy-article-page_main mhy-container">
            <div class="mhy-article-page_header">
              <!--  -->
              <div class="mhy-article-page_title">
                <h1>「旅行绘本」H5活动：完成绘制获得摆设图纸「花海的摇篮」</h1>
              </div>
              <!--  -->
              <div class="mhy-article-page_info">
                <div class="mhy-article-page_info_from">
                  <span>来自板块：</span>
                  <a href="" class="mhy-article-page_info_from-name" target="_blank">官方</a>
                </div>

                <div class="mhy-article-page_info_count">
                  <div class="mhy-article-page_info_count-item">
                    <i class="mhy-icon iconfont icon-liulan"></i>
                    <span title="453866">45.3万</span>
                  </div>

                  <div class="mhy-article-page_info_count-item mhy-clickable">
                    <i class="mhy-icon iconfont icon-fayan"></i>
                    <span title="2408">2408</span>
                  </div>

                  <div class="mhy-article-page_info_count-item">
                    <i class="mhy-icon iconfont icon-dianzan2"></i>
                    <span title="38846">38846</span>
                  </div>

                  <div class="mhy-article-page_info_count-item">
                    <i class="mhy-icon iconfont icon--star-o"></i>
                    <span title="710">710</span>
                  </div>
                </div>
              </div>
							
              <!--  -->
              <div class="mhy-article-page-updatetime">
                <span>文章发表于：07-03</span>

              </div>
              <!--  -->
            </div>

            <!-- 内容区域 -->
            <div class="mhy-article-page_content">
              <div class="mhy-img-text-article ql-container ql-snow">
                <div class="mhy-img-text-article_content ql-editor">
                  <div class="ql-image">
                    <div class="ql-image-box">
                      <img preView="imgPreView" src="./images/51dde9e12d5f170deee1b77dc855ec7e_7951742296725595486.jpg"
                        alt="米哈游背景图">
                    </div>
                  </div><p><span style="color: rgb(17, 17, 17);">旅途中的回忆弥足珍贵，只有记录下来才能永久珍藏。</span></p><p><span style="color: rgb(17, 17,17);">活动期间完成旅行绘本的制作，可获得</span><span
                      style="color: rgb(173, 114,14);">原石</span><span style="color: rgb(17, 17,17);">、</span><span
                      style="color: rgb(173, 114,14);">摆设图纸</span><span style="color: rgb(17, 17,17);">等奖励！</span>
                  </p><p>&nbsp;</p><p><strong style="color: rgb(51, 51, 51);">〓活动时间〓</strong></p><p><span style="color: rgb(173, 114, 14);">2021/07/03 11:00~2021/07/12 03:59</span></p><p>&nbsp;</p><p><strong style="color: rgb(51, 51, 51);">〓参与条件〓</strong></p><p><span style="color: rgb(173, 114, 14);">冒险等阶≥21级</span></p><p>&nbsp;</p><p><strong style="color: rgb(51, 51, 51);">〓参与方式〓</strong></p><p><span style="color: rgb(17, 17, 17);">PC端按下Esc键、手机端点击左上角派蒙图标、PS端按OPTIONS键打开派蒙界面选择特典活动可参与活动。</span></p><p>&nbsp;</p><p><strong style="color: rgb(51, 51, 51);">〓活动说明〓</strong></p><p><span style="color: rgb(17, 17, 17);">●活动前7天，每天04:00会解锁新任务，完成指定任务可获得「绘制颜料」。</span></p><p><span style="color: rgb(17, 17, 17);">●活动期间，使用「绘制颜料」可进行绘制，每次绘制可随机完成本期绘本图案中的一部分，并可能获得</span><span style="color: rgb(173, 114, 14);">摩拉</span><span style="color: rgb(17, 17, 17);">、</span><span
                      style="color: rgb(173, 114, 14);">冒险家的经验</span><span style="color: rgb(17, 17, 17);">或</span><span
                      style="color: rgb(173, 114, 14);">精锻用良矿</span><span
                      style="color: rgb(17, 17, 17);">奖励之一。同时，完成绘本指定区域还可获得</span><span
                      style="color: rgb(173, 114, 14);">精锻用魔矿</span><span style="color: rgb(17, 17, 17);">、</span><span
                      style="color: rgb(173, 114, 14);">大英雄的经验</span><span style="color: rgb(17, 17, 17);">、</span><span
                      style="color: rgb(173, 114, 14);">原石</span><span style="color: rgb(17, 17, 17);">、</span><span
                      style="color: rgb(173, 114, 14);">摆设图纸「蓬蓬果的天空之梦」</span><span
                      style="color: rgb(17, 17, 17);">奖励。完成绘制所有区域可获得</span><span
                      style="color: rgb(173, 114, 14);">摆设图纸「花海的摇篮」</span><span style="color: rgb(17, 17, 17);">。</span></p>
											<p><br></p>
                </div>
              </div>
            </div>
						
            <!-- 内容底部 -->	
            <div class="mhy-article-page_footer">
              <div class="mhy-article-page-bottom">
                <div class="mhy-topic-label-selector">
                  <!--  -->
                </div>
                <div class="mhy-buttom mhy-article-page_report mhy-buttom-default">
                  <button class="mhy-button_button">举报</button>
                </div>
              </div>
							
							<!--  -->
							<!-- 内容底部div布局 -->
							<div class="mhy-article-page-user-data">
								<div class="mhy-article-page-user-data_item">
									<!--点赞区域 -->
									<div class="mhy-heart-click">
									<i class="mhy-symbol-icon iconfont icon-dianzan2"></i>
										<span>42356</span>
									</div>
								</div>
								
								<!-- 收藏区域 -->
								<div class="mhy-article-page-user-data_item">
									<div class="mhy-heart-click">
									<i class="mhy-symbol-icon iconfont icon--star-o"></i>
										<span>757</span>
									</div>
								</div>
							</div>
            </div>
          </div>
        </div>
       
			 <!-- 右边布局-->
				<div class="mhy-layout_sub">
					<div class="mhy-article-page-author">
						<div class="mhy-avator mhy-user-card_avator mhy-avator_xl">
							<img src="images/avatar10014.png" class="mhy-avator_img">
							<!--  -->
							<div class="mhy-avator_auth">
								<span class="mhy-authentication-mark">
									<img src="images/下载%20(1).png" class="mhy-img-icon mhy-authentication-mark__icon" >
								</span>
							</div>
							
						</div>
						
						<div class="mhy-user-card-info">
							<a href="#" class="mhy-routerr mhy-account-title mhy-suer-card_link" target="_blank">
							<span class="mhy-account-title_name">西风快报员</span>
							<img class="mhy-img-icon mhy-account-title_level" src="images/level16.png" >
							<!--  -->
							<!--  -->
							</a><p class="mhy-user-card_certification">唯一指定记者</p>
							<div class="mhy-follow-bottom mhy-user-card_follow mhy-follow-bottom-lg">
								<span>关注</span>
							</div>
						</div>
						
					</div>
					
					<!--二维码样式布局07-04 -->
					<div class="mhy-side-section mhy-sem-section">
						<!--  -->
						<div class="mhy-side-section-body">
							 <div class="mhy-sem-block">
							 	<a href="https://bbs.mihoyo.com" target="_blank">
									<!-- 二维码div布局 -->
									<div class="mhy-qrcode mhy-qrcode-default">
										<div class="mhy-qrcode_code">
											<img src="images/qrcode_ys.png" class="mhy-qrcode_img" >
										</div>
									   <!-- 二维码右侧p标签-->
										 <div class="mhy-qrcode-text">
									   	<p class="mhy-qrcode-title">扫码下载米游社APP</p>
											<p class="mhy-qrcode-subtitle">了解提瓦特最新咨询</p>
									   </div>
									</div>
								</a>
							 </div>
						</div>
					</div>
					
					 <!-- 轮播图div布局-->
					 <div class="mhy-side-section">
						 <div class="mhy-ad-container swiper-container swiper-container-initialized swiper-container-horizontal">
							 <div class="swiper-wrapper" style="transition-duration:0ms; transform: translate3d(0px,0px,0px);">
							 	 <div class="mhy-ad swiper-slide swiper-slide-duplicate swiper-slide-active" style="width: 280px;">
							 	 	<a href="https://webstatic.mihoyo.com/bbs/event/signin-ys/index.html?bbs_auth_required=true&act_id=e202009291139501" target="_blank" class="mhy-router-link">
										<div class="mhy-ad_banner">
											<img src="images/ys_signin.jpg" alt="每日签到">
										</div>
										<!--  -->
									</a>
							 	 </div>
								 
								 <!-- 第二章图片-->
								 <div class="mhy-ad swiper-slide swiper-slide-next swiper-slide-duplicate-prew" style="width: 280px;">
								 	<a href="https://autopatchcn.yuanshen.com/client_app/launcher/20210609_488d518c1f8772b1/yuanshen_setup_miyoushe_20210525220024.exe" target="_blank" class="mhy-router-link">
								 										<div class="mhy-ad_banner">
								 											<img src="images/2190d1c43c10dd54c02298755840f092_5749180958608132693.jpg" alt="点击下载">
								 										</div>
								 										<!--  -->
								 									</a>
								 </div>
								 
								 <!-- 第三章图片-->
								 <div class="mhy-ad swiper-slide" style="width: 280px;">
								 	<a href="https://webstatic.mihoyo.com/app/community-game-records/index.html#/pc1" target="_blank" class="mhy-router-link">
								 										<div class="mhy-ad_banner">
								 											<img src="images/pc_ad_ys_game_record2.jpg" alt="战绩查询">
								 										</div>
								 										<!--  -->
								 									</a>
								 </div>
								 
								 <!-- 第四章图片-->
								 <div class="mhy-ad swiper-slide swiper-slide-duplicate-active" style="width: 280px;">
								 	<a href="https://webstatic.mihoyo.com/bbs/event/signin-ys/index.html?bbs_auth_required=true&act_id=e202009291139501" target="_blank" class="mhy-router-link">
								 										<div class="mhy-ad_banner">
								 											<img src="images/ys_signin.jpg" alt="每日签到">
								 										</div>
								 										<!--  -->
								 									</a>
								 </div>
								 
								 <!-- 第五章图片-->
								 <div class="mhy-ad swiper-slide swiper-slide-next swiper-slide-duplicate-prew swiper-slide-duplicate-next" style="width: 280px;">
								 	<a href="https://autopatchcn.yuanshen.com/client_app/launcher/20210609_488d518c1f8772b1/yuanshen_setup_miyoushe_20210525220024.exe" target="_blank" class="mhy-router-link">
								 										<div class="mhy-ad_banner">
								 											<img src="images/2190d1c43c10dd54c02298755840f092_5749180958608132693.jpg" alt="点击下载">
								 										</div>
								 										<!--  -->
								 									</a>
								 </div>
								 
								 
								 
							 </div>
						 	
							
							<span class="swiperr-notification" aria-live="aeesrtive" aria-atomic="true"></span>
						 </div>
					 </div>
					 
					 <div class="mhy-side-section">
						 <div class="mhy-side-section_header">
						 	<h2 class="mhy-side-section_title">热门内容</h2>
							<div class="mhy-side-section_link"></div>
						 </div>
						 
						 <!-- 热门内容话题-->
						 <div class="mhy-side-section_body">
						 	 <div class="mhy-article-page-hot">
								 <div class="mhy-hot-card">
								 	 <a href="https://bbs.mihoyo.com/ys/article/7233239" class="mhy-router-link mhy-hot-card_link" target="_blank">
										 <div class="mhy-hot-card_cover" style="background-image: url(./images/fd195f2e10e25d9beba1f02c25e63820_7690114847257903081.png);">
										 </div>
										 <p title="【旅行日记 7.04】初见枫原万叶" class="mhy-hot-card_title">【旅行日记 7.04】初见枫原万叶</p>
									 </a>
								 </div>
								 
								 <div class="mhy-hot-card">
								 	 <a href="https://bbs.mihoyo.com/ys/article/7233239" class="mhy-router-link mhy-hot-card_link" target="_blank">
								 										 <div class="mhy-hot-card_cover" style="background-image: url(./images/fd195f2e10e25d9beba1f02c25e63820_7690114847257903081.png);">
								 										 </div>
								 										 <p title="【旅行日记 7.04】初见枫原万叶" class="mhy-hot-card_title">【旅行日记 7.04】初见枫原万叶</p>
								 									 </a>
								 </div>
								 
								 <div class="mhy-hot-card">
								 	 <a href="https://bbs.mihoyo.com/ys/article/7233239" class="mhy-router-link mhy-hot-card_link" target="_blank">
								 										 <div class="mhy-hot-card_cover" style="background-image: url(./images/fd195f2e10e25d9beba1f02c25e63820_7690114847257903081.png);">
								 										 </div>
								 										 <p title="【旅行日记 7.04】初见枫原万叶" class="mhy-hot-card_title">【旅行日记 7.04】初见枫原万叶</p>
								 									 </a>
								 </div>
						 	 </div>
						 </div> 	
					 </div>
					 
					 
					 <!-- 所属板块div布局-->
					<div class="mhy-side-section">
											 <div class="mhy-side-section_header">
											 	<h2 class="mhy-side-section_title">所属板块</h2>
												<div class="mhy-side-section_link"></div>
											 </div>
											 
											 <div class="mhy-side-section_body">
											 	 <div class="mhy-form-card mhy-article-page-form mhy-form-card-md">
													 	 <a href="https://bbs.mihoyo.com/ys/article/7233239" class="mhy-router-link mhy-form-card_link" target="_blank">
															<img src="images/下载%20(2).png" class="mhy-img-icon" >
															<div class="mhy-form-card_info">
																<p title="官方" class="mhy-form-card_title">官方</p>
															</div>
														 </a>
											 	 </div>
											 </div> 	
					</div>
					 <!-- -->
					 <div class="mhy-side-section"></div>
				</div>
				
					<!-- 内容左侧div布局  -->
				<!-- 发言div -->
				<div class="mhy-article-actions">
					<div class="mhy-article-actions_item">
						<i class="mhy-icon iconfont icon-fayan"></i>
						<span title="2790">2790</span>
					</div>
					<!-- 收藏div -->
					<div class="mhy-article-actions_item">
						<i class="mhy-icon iconfont icon--star-o"></i>
						<span title="819">819</span>
					</div>
					<!-- 点赞div -->
					<div class="mhy-article-actions_item">
						<i class="mhy-icon iconfont icon-dianzan2"></i>
						<span title="47022">47022</span>
					</div>
				</div>
				<div class="mhy-article-page-control"></div>
			</div>
		</div>
  </div>
</body>
</html>